<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>用户信息</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="http://localhost:8080/assets/img/favicon.ico">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://localhost:8080/assets/js/main.js"></script>

    <!-- CSS here -->
    <link rel="stylesheet" href="http://localhost:8080/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/slicknav.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/animate.min.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/magnific-popup.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/jquery-ui.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/themify-icons.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/slick.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/nice-select.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/style.css">
</head>
<body>
<div th:replace="template.html::header"></div>
<main>
    <!-- Hero Area Start-->
    <div class="slider-area gray-bg position-relative"
         style="background-image: url('http://localhost:8080/assets/img/banner.jpg')">
        <div class="single-slider d-flex align-items-center slider-height2">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="hero-caption hero-caption2">
                            <h2 style="color: whitesmoke">浏览用户</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero Area End -->

    <!-- job_listing_area_start  -->
    <div class="job_listing_area section-bg2 " style="padding-top: 30px">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="job_filter white-bg">
                        <div class="form_inner white-bg">
                            <form action="user" method="post">
                                <div class="row" style="display: flex;flex-direction: row-reverse;">
                                    <div class="single_field" style="margin-right: 10px;">
                                        <button class="boxed-btn3 w-100" type="submit">搜索</button>
                                    </div>
                                    <div class="single_field" style="margin-right: 30px">
                                        <input type="text" placeholder="用户名" name="keyword">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="job_lists m-0">
                        <div class="recent_joblist_wrap">
                            <div class="recent_joblist white-bg " style="margin-top: 20px;margin-bottom: 0">
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <h4>用户列表</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="list">
                            <form method="post" action="user" class="col-lg-12 col-md-12"
                                  th:each="u : ${list}">
                                <label style="display: none">
                                    <input type="text" name="user-id" th:value="${u.getId()}">
                                </label>
                                <div class="single_jobs white-bg d-flex justify-content-between">
                                    <div class="jobs_left d-flex align-items-center">
                                        <div class="jobs_conetent">
                                            <a th:href="'personal-info?id=' + ${u.getId()}"><h4
                                                    th:text="${u.getName()}"></h4></a>
                                            <div class="links_locat d-flex align-items-center">
                                                <div class="location">
                                                    <p>
                                                        <svg width="15" height="15" viewBox="0 0 48 48" fill="none"
                                                             xmlns="http://www.w3.org/2000/svg">
                                                            <circle cx="24" cy="12" r="8" fill="none" stroke="#333"
                                                                    stroke-width="4" stroke-linecap="round"
                                                                    stroke-linejoin="round"></circle>
                                                            <path d="M42 44C42 34.0589 33.9411 26 24 26C14.0589 26 6 34.0589 6 44"
                                                                  stroke="#333" stroke-width="4" stroke-linecap="round"
                                                                  stroke-linejoin="round"></path>
                                                        </svg>
                                                        <a th:text="${u.getAccount()}"></a>
                                                    </p>
                                                </div>
                                                <div class="location">
                                                    <p>
                                                        <i class="far">
                                                            <?xml version="1.0" encoding="UTF-8"?>
                                                            <svg width="20" height="20" viewBox="0 0 48 49" fill="none"
                                                                 xmlns="http://www.w3.org/2000/svg">
                                                                <rect width="48" height="48" fill="white"
                                                                      fill-opacity="0.01"/>
                                                                <path d="M16.9963 7.68583C17.7228 7.68583 18.3922 8.07985 18.7449 8.71509L21.1913 13.1219C21.5116 13.6989 21.5267 14.3968 21.2315 14.9871L18.8747 19.7008C18.8747 19.7008 19.5577 23.2122 22.4161 26.0706C25.2746 28.929 28.7742 29.6002 28.7742 29.6002L33.4871 27.2438C34.0778 26.9484 34.7762 26.9637 35.3534 27.2846L39.7727 29.7416C40.4074 30.0945 40.8009 30.7635 40.8009 31.4896L40.8009 36.5631C40.8009 39.1468 38.401 41.0129 35.953 40.1868C30.925 38.4903 23.1203 35.2601 18.1735 30.3132C13.2267 25.3664 9.99643 17.5617 8.29989 12.5338C7.47387 10.0857 9.33996 7.68583 11.9236 7.68583L16.9963 7.68583Z"
                                                                      fill="none" stroke="#9b9b9b" stroke-width="4"
                                                                      stroke-linejoin="round"/>
                                                            </svg>
                                                        </i>
                                                        <a th:text="${u.getPhone()}"></a>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="jobs_right">
                                        <div class="apply_now">
                                            <a th:if="${isAdmin}"
                                               th:href="'personal-info?id=' + ${u.getId()}"
                                               class="boxed-btn3">
                                                编辑
                                            </a>
                                        </div>
                                        <div class="apply_now">
                                            <a th:if="${isAdmin}"
                                               th:onclick="'deleteUser(' + ${u.getId()} + ')'"
                                               class="boxed-btn3x">
                                                删除
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="job_filter white-bg">
                        <div class="form_inner white-bg">
                            <div class="row">
                                <div style="display: flex;margin: auto;" class="single_field">
                                    <input onclick="add(-1)" class="boxed-btn3" style="margin-right: 20px" value="上一页">
                                    <input onchange="change(this.value)" id="pager" type="number"
                                           value="1" min="1" disabled>
                                    <input onclick="add(1)" class="boxed-btn3" style="margin-left: 20px" value="下一页">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- job_listing_area_end  -->
</main>
<div th:replace="template.html::footer"></div>
<!-- Scroll Up -->
<div id="back-top">
    <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>

<script>
    function deleteUser(id) {
        $.ajax({
            url: 'delete-user',
            type: 'post',
            data: {'user-id': id},
            success: function () {
                window.location = 'user'
            }
        })
    }
</script>
</body>
</html>